<template>
  <div class="view-setting">
    <div class="view-head">
      <div class="head-start"></div>
      <div class="head-center"></div>
      <div class="head-end"></div>
    </div>
    <div class="view-body">
      <DataKeyValue />
    </div>
    <div class="view-foot"></div>
  </div>
</template>

<script>
import DataKeyValue from '../data/key-value.vue'

export default {
  components: {
    DataKeyValue
  },

  props: {
    value: {
      default () {
        return {}
      }
    }
  },

  data () {
    return {
      form: {}
    }
  }
}
</script>

<style lang="less">
.dialog-setting {
  .el-dialog__header {
    padding: 10px;
  }
  .el-dialog__body {
    padding: 8px;
  }
  .el-dialog__footer {
    padding: 10px;
  }
  .form-setting {
    display: flex;
  }
  .form-side {
    padding: 0 8px;
    width: 240px;
    border-right: 1px solid #DCDFE6;
    .side-caption {
      padding: 4px 8px;
      cursor: pointer;
      transition-duration: 0.4s;
      &.active,&:hover {
        background: #efefef;
        color: #409EFF;
      }
    }
  }
  .form-body {
    flex: 1;
    padding: 0 8px;
  }
}
</style>